<template>
	<view>
		<view class="tabber-heigth">
			<view style="position: fixed;bottom: 0;width: 100vw;left: 0;z-index: 90;">
				<view class="tabbar-box">

					<!-- 内容开始 -->
					<view class="tabbar-list flex-y-center">
						<view @tap.stop="toPage(item.path,'switch')" v-for="(item,index1) in list" :index="index1" :key="index1"
							class="tabbar-item">
							<template v-if="item.type !== 'all'">
								<view class="image">
									<image :src="index == item.index ? item.src2:item.src"
										style="width: 100%;height: 100%;"></image>
								</view>
								<view class="tabbar-name" :class="index == item.index?'tabbar-item-active':''">
									{{item.name}}
								</view>
							</template>
							<template v-else>
								<image src="../../static/erqi/beike2.png" mode=""
									style="width: 100rpx;height: 100rpx;transform: translateY(-4rpx);"></image>
							</template>
						</view>
					</view>
					<!-- 内容结束 -->

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props: {
			index: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				list: [{
						name: '商城',
						src: '../../static/erqi/tabbar/tabbar1-1.png',
						src2: '../../static/erqi/tabbar/tabbar1-2.png',
						index: 0,
						path: '/pages/shopping/shopping',
					},
					{
						name: '朋友',
						src: '../../static/erqi/tabbar/tabbar2-1.png',
						src2: '../../static/erqi/tabbar/tabbar2-2.png',
						index: 1,
						path: '/pages/shopping/shopping',
					},
					{
						name: '',
						src: '../../static/erqi/tabbar/tabbar1-1.png',
						src2: '../../static/erqi/tabbar/tabbar1-2.png',
						index: 2,
						type: 'all',
						path: '/pages/game/game',
					},
					{
						name: '消息',
						src: '../../static/erqi/tabbar/tabbar3-1.png',
						src2: '../../static/erqi/tabbar/tabbar3-2.png',
						index: 3,
						path: '/pages/shopping/shopping',
					},
					{
						name: '我的',
						src: '../../static/erqi/tabbar/tabbar4-1.png',
						src2: '../../static/erqi/tabbar/tabbar4-2.png',
						index: 4,
						path: '/pages/user/user',
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.tabber-heigth {
		width: 100vw;
		height: 148rpx;
		position: relative;
		z-index: 90;
	}

	.tabbar-box {
		width: 100vw;
		height: 148rpx;
		background-color: #171819;
		z-index: 90;
		position: relative;
	}

	.tabbar-list {
		display: flex;
		height: 108rpx;
		align-items: center;

	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		padding-top: 6rpx;

		.image {
			width: 46rpx;
			height: 46rpx;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.tabbar-name {
			font-size: 20rpx;
			color: #838383;

		}
	}

	.tabbar-item-active {
		color: #FFFFFF !important;
	}
	.tabbar-box{
		animation: jianbian 0.5s;
	}
	@keyframes jianbian {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}
</style>
